<template>
  <f7-page class="step-body9">
    <!-- 表头 -->
    <f7-row class="f7-row">
      <f7-col class="f7-icons" width="20"
        ><f7-link
          back
          icon-material="xmark"
          icon-f7="xmark"
          color="white"
        ></f7-link
      ></f7-col>
      <f7-col class="f7-col-title">工程基本信息</f7-col>
      <f7-col class="f7-icons" width="20">ellipsis</f7-col>
    </f7-row>
    <!-- 导航栏 -->
    <qm-tabs
      class="tabs"
      line-width="calc(30px * var(--ratio))"
      swipeable
      animated
      :sticky="true"
    >
      <qm-tab title="抽查登记">
        <!-- 内容：工程信息 -->
        <f7-card class="qm-card">
          <f7-list>
            <f7-list-item accordion-item title="工程信息">
              <!-- 标题旁的标志 -->
              <div slot="media" class="list-icon"></div>
              <f7-accordion-content>
                <f7-list>
                  <qm-field
                    label="工程名称"
                    autosize
                    readonly
                    placeholder="请输入"
                    v-model="list.name1"
                  >
                  </qm-field>
                  <qm-field
                    label="工程状态"
                    autosize
                    readonly
                    placeholder="请输入"
                    v-model="list.name2"
                  >
                  </qm-field>
                  <qm-field
                    label="使用车辆"
                    autosize
                    placeholder="请选择车辆"
                    :is-link="true"
                    readonly
                  >
                  </qm-field>
                  <qm-field
                    label="去向登记"
                    autosize
                    placeholder="请选择登记去向时间"
                    :is-link="true"
                    readonly
                  >
                  </qm-field>
                  <qm-field
                    label="抽查类型"
                    autosize
                    placeholder="请输入"
                    :is-link="true"
                    readonly
                    v-model="list.name3"
                  >
                  </qm-field>
                  <qm-field label="上级检查" autosize choice class="choice">
                    <template #input>
                      <!-- 是否选择 -->
                      <f7-list class="qm-list">
                        <f7-list-item
                          class="qm-list-item"
                          radio
                          radio-icon="start"
                          title="是"
                          name="demo-radio-start"
                          checked
                        ></f7-list-item>
                        <f7-list-item
                          class="qm-list-item"
                          radio
                          radio-icon="start"
                          title="否"
                          name="demo-radio-start"
                        ></f7-list-item>
                      </f7-list>
                    </template>
                  </qm-field>
                </f7-list>
              </f7-accordion-content>
            </f7-list-item>
          </f7-list>
        </f7-card>
        <!-- 内容：抽查登记 -->
        <f7-card class="qm-card">
          <f7-list>
            <f7-list-item accordion-item title="抽查登记">
              <!-- 标题旁的标志 -->
              <div slot="media" class="list-icon"></div>
              <f7-accordion-content> </f7-accordion-content>
            </f7-list-item>
          </f7-list>
        </f7-card>
        <!-- 内容：本次调查图片 -->
        <f7-card class="qm-card">
          <f7-list>
            <f7-list-item accordion-item title="本次调查图片">
              <!-- 标题旁的标志 -->
              <div slot="media" class="list-icon"></div>
              <f7-accordion-content>
                <div class="top-frame">
                  <qm-upload-picture
                    :params="{ dataKey: 'test', type: 'test' }"
                    class="qm-choose-image"
                    :showtitle="false"
                  ></qm-upload-picture>
                </div>
              </f7-accordion-content>
            </f7-list-item>
          </f7-list>
        </f7-card>
      </qm-tab>
      <qm-tab title="整改通知">内容 2</qm-tab>
      <qm-tab title="违规计分">内容 3</qm-tab>
      <!-- <van-tab title="aaa">内容 4</van-tab>
      <van-tab title="bbb">内容 5</van-tab> -->
      <!-- <van-tab title="ccc">内容 6</van-tab>
      <van-tab title="ddd">内容 7</van-tab>
      <van-tab title="fff">内容 8</van-tab> -->
    </qm-tabs>
  </f7-page>
</template>

<script>
export default {
  data() {
    return {
      list: {
        name1: "广州大学大学城校区绿篱建设项目",
        name2: "在建",
        name3: "日常抽查",
      },
    };
  },
};
</script>
<style lang="less" scoped>
/deep/ .van-field__control--custom {
  justify-content: flex-start;
}
/deep/ .van-tab {
  flex: auto !important;
}
.step-body9 {
  background-color: var(--color-fill-background);

  // 表头
  .f7-row {
    background-color: var(--color-brand);
    margin: 0;
    padding: 0;
    padding-top: calc(27px * var(--ratio));
    padding-bottom: calc(20px * var(--ratio));

    .f7-col-title {
      font-size: calc(32px * var(--ratio));
      text-align: center;
      color: #ffffffe6;
      font-weight: 400;
    }

    .f7-icons {
      font-size: calc(40px * var(--ratio));
      color: #ffffff;
      .f7-link {
        height: auto;
      }
      .f7-link::before {
        display: none;
      }
    }
  }

  // 内容卡片
  .qm-card {
    margin: 0px;
    padding: 0px;
    margin-top: calc(20px * var(--ratio));
    --f7-card-border-radius: 0px;
    --f7-list-item-title-font-size: calc(30px * var(--ratio));
    --f7-list-item-title-text-color: var(--color-text-title);
    --f7-list-item-title-font-weight: 600;
    --f7-list-item-media-margin: 0px;
    --f7-input-font-size: 15px;
    .item-media {
      min-width: 12px;
    }
    .list-icon {
      width: 4px;
      height: 13px;
      margin-bottom: 2px;
      background: var(--color-brand);
    }
    .list-icon {
      min-width: 0px;
      font-size: 13px;
      color: var(--color-brand);
    }
    .choice {
      line-height: 38px;
      .qm-list {
        margin: 0px;
        --f7-list-item-media-margin: 0px;
        --f7-radio-extra-margin: 3px;
        --f7-list-item-padding-horizontal: 0px;
        --f7-safe-area-right: 0px;
        --f7-list-item-min-height: 0px;
        --f7-list-item-padding-vertical: 0px;
        .qm-list-item{
          margin-right: 20px;
        }
        .item-radio {
          padding: 0px;
          margin-right: 10px;
        }
        /deep/ ul {
          display: flex;
        }
      }
    }
    .top-frame {
      width: 100%;
      border-top: 1px solid #e9ecf0;
    }
  }

  /deep/ .list .item-media {
    min-width: 10px;
  }
  /deep/ .van-field__label {
    line-height: 35px;
  }
}
</style>
